.notes-wrapper {
  @include row-center;
  align-items: flex-start;
  width: 100%;
  margin-top: 60px;
  background-color: $background-color;
  padding: 20px;

  .notes-left {
    width: 13%;

    position: fixed;
    left: 16.5%;

    .user {
      height: 170px;
      background: #fff;
      width: 100%;

      img {
        width: 100%;
      }

      .left-content {
        transform: translate3d(0, -55%, 0);

        .top-box {
          margin: 20px;
        }

        .bottom-box {
          display: flex;
          justify-content: space-around;
          margin: 40px 10px;

          .count-item {
            cursor: pointer;
            text-align: center;

            >span {
              color: $dark-blue;
              font-size: $font-large;
              font-weight: bold;
            }

            &:hover {
              color: $dark-blue;
            }
          }
        }
      }
    }

    .comments {
      @extend .user;
      margin-top: 15px;
    }
  }

  .notes-right {
    width: 13%;
    background: #fff;
    padding: 20px;
    position: fixed;
    right: 16.5%;

    .ivu-tree-children {
      letter-spacing: 2px;
      line-height: 30px;
    }
  }

  .notes-main {
    width: 40%;
    margin: 0 15px;

    .notes-main-p1 {
      padding: 15px;
      background: #fff;
      padding-bottom: 0;
    }

    .notes-main-p2 {
      margin-top: 15px;
      padding: 15px 20px;
      background: #fff;

      .ivu-list-item-meta-title {
        margin-bottom: 0;
      }

      .list-action {
        display: flex;
        align-items: center;
        color: rgba(0, 0, 0, 0.45);
        margin-top: 20px;

        .ivu-icon {
          cursor: pointer;
        }
      }

      .ivu-collapse {
        border: none;

        .ivu-collapse-header {
          height: 0;
        }

        .ivu-collapse-content-box {
          padding-bottom: 0;
        }

        .comments-input-box {
          display: flex;
          align-items: center;
          padding: 10px 0;

          .ivu-btn {
            margin-left: 10px;
            height: 50px;
          }
        }
      }

      .ivu-list-footer {
        text-align: center;

        .show-more {
          cursor: pointer;
          color: $sub-color;

          &:hover {
            color: $blue;
          }
        }
      }

      .note-priview-box {
        width: 240px;
        height: 190px;
        overflow: hidden;
        cursor: pointer;

        img {
          width: 100%;
        }
      }
    }

    .publish-box {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .publish-left {
        .ivu-icon {
          cursor: pointer;
          margin: 10px;
        }

        .ivu-tag {
          .ivu-icon {
            margin: 0;
          }
        }
      }

      .publish-right {
        button {
          margin: 10px 5px;
        }
      }

      .upload-box {
        display: flex;

        .upload-list {
          width: 60px;
          height: 60px;
          text-align: center;
          line-height: 60px;
          border: 1px solid transparent;
          border-radius: 4px;
          overflow: hidden;
          background: #fff;
          position: relative;
          box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
          margin-right: 4px;
        }

        .upload-list img {
          width: 100%;
          height: 100%;
        }

        .upload-list-cover {
          display: none;
          position: absolute;
          top: 0;
          bottom: 0;
          left: 0;
          right: 0;
          background: rgba(0, 0, 0, 0.6);
        }

        .upload-list:hover .upload-list-cover {
          display: block;
        }

        .upload-list-cover i {
          color: #fff;
          font-size: 20px;
          cursor: pointer;
          margin: 0 2px;
        }

        #upload-button {
          font-size: $font-small;
          color: $sub-color;
          display: inline-block;

          .ivu-icon {
            margin-bottom: 0;
            color: $dark-blue;
          }
        }
      }
    }
  }
}